<template>
	<uni-nav-bar title="钱包" left-icon="arrowleft" @clickLeft="back()" />
	<view>
		<!-- 零钱页面 -->
		<view class="smallchange" v-for="item in list">
			<view class="content1">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
				<view v-if="item.id==1" class="showLinqian" @click="toLingqian(looseChange)">￥{{looseChange}}
					<image src="../../static/image/right.png"></image>
				</view>
			</view>
		</view>
		<div style="height: 13px;"></div>
		<view class="smallchange" v-for="item in list2">
			<view class="content1">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<div style="height: 13px;"></div>
		<view class="smallchange" v-for="item in list3">
			<view class="content1">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<div style="height: 13px;"></div>
		<view class="smallchange" v-for="item in list4">
			<view class="content1">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>
		<div style="height: 13px;"></div>
		<view class="smallchange" v-for="item in list5">
			<view class="content1">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.name}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				looseChange: 0,
				list: [{
						id: 1,
						url: "/static/image/lq.png",
						name: "零钱"
					},
					{
						url: "/static/image/lingqiantong.png",
						id: 2,
						name: "零钱通"
					},
					{
						url: "/static/image/yinhangka.png",
						id: 3,
						name: "银行卡"
					},
				],
				list2: [{
					id: 4,
					url: "/static/image/rmb.png",
					name: "零钱"
				}],
				list3: [{
						id: 5,
						url: "/static/image/zhifufen.png",
						name: "支付分"
					},
					{
						url: "/static/image/qinshuka.png",
						id: 6,
						name: "亲属卡"
					},
				],
				list4: [{
					id: 7,
					url: "/static/image/rmb.png",
					name: "消费者保护"
				}],
				list5: [{
						id: 8,
						url: "/static/image/shenfenxinxi.png",
						name: "身份信息"
					},
					{
						url: "/static/image/zhifushezhi.png",
						id: 9,
						name: "支付设置"
					},
				],
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			toLingqian(change) {
				uni.navigateTo({
					url: '/pages/user/SmallChangeDetail?looseChange=' + change
				})
			},
			getLooseChange() {
				const looseChange = 0
				uni.request({
					url: "http://localhost:9999/nbb/LooseChange/getLooseChange",
					header: {
						'Authorization': uni.getStorageSync('Authorization'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					data: {
						userId: uni.getStorageSync('userId')
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.looseChange = res.data.data.looseChange
						} else {
							console.log("获取零钱失败");
							// console.log(res.data);
						}
					},
					fail() {
						console.log("获取零钱失败");
					}
				})
			}

		},
		created() {
			this.getLooseChange()
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #EDEDED;
	}

	::v-deep .uni-nav-bar-text {
		font-size: 20px;
	}

	::v-deep .uni-navbar__content_view {
		font-size: 20px;
	}

	.smallchange {
		padding: 4.5%;
		background-color: #ffffff;


		.content1 {
			display: flex;
			padding: 1.5%;
			align-items: center;
			justify-content: left;
			font-weight: 600;
			font-size: 17px;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 20px;
			}
		}
	}

	.showLinqian {
		position: absolute;
		right: 6px;
	}
</style>